<template>
<!-- 其他医生或官方主页 -->
  <view class="pages" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }">
    <view class="bgColor">
      <!-- #ifdef APP-PLUS-->
      <u-sticky z-index="1188" :bgColor="navBgc">
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <u-sticky offset-top="-44" z-index="1188" :bgColor="navBgc">
        <!-- #endif -->
          <view :style="{ height: tops + 'px' , backgroundColor: navBgc}"></view>
          <view class="header" :style="{ backgroundColor: navBgc,paddingTop: '30rpx' }">
            <view class="left" @click="toBack">
              <u-icon name="arrow-left" size="20" :color="textColor" style="margin-right: 5rpx;"></u-icon>
            </view>
            <view class="middle-avatar" v-if="flag">
              <image
                :src="
                  userInfo?.detail?.avatar ||
                  'https://ossresource.miyingbl.com/uploads/20231230/h-bl-app/1703899956674'
                "
                class="bor-radius-50 bg-co-ee"
              />
            </view>
            <view class="middle" v-if="flag">
              <view class="name">{{  userInfo?.detail?.name || userInfo?.detail?.nickname }}</view>

              <view class="user_tags" v-if="type == 'official'">
                <image
                  v-if="type == 'official'"
                  src="https://ossresource.miyingbl.com/uploads/20240308/072661a99870e1fcfba1d1df6d8ddd35.png"
                ></image>             
              </view>
              <view class="user_tags_4" v-if="type == 'doctor' && userInfo?.detail?.lname&& userInfo?.detail?.lname.length==4">
                {{ userInfo?.detail?.lname }}
              </view>
              <view class="user_tags_5" v-if="type == 'doctor' && userInfo?.detail?.lname&& userInfo?.detail?.lname.length==5">
                {{ userInfo?.detail?.lname }}
              </view>
              <view class="user_tags_3" v-if="type == 'doctor' && userInfo?.detail?.lname&& userInfo?.detail?.lname.length==3">
                {{ userInfo?.detail?.lname }}
              </view>
              <view class="user_tags_2" v-if="type == 'doctor' && userInfo?.detail?.lname&& userInfo?.detail?.lname.length==2">
                {{ userInfo?.detail?.lname }}
              </view>
            </view>
            <view class="right-follow" v-if="flag">
              <view class="btn-sure" v-if="!userInfo?.isSelf" @click="follow" :class="{ btnFollow: userInfo?.detail?.isFollow }">
                {{ userInfo?.detail?.isFollow ? '已关注' : '+关注' }}
              </view>
            </view>
            <view class="right" @click="toDetail">
              <!-- <u-icon name="share-square" size="30" :color="textColor"></u-icon>
              <view class="text" :style="{ color: textColor }">分享</view> -->
              <!-- <image src="https://ossresource.miyingbl.com/def/03e43202405231727306873.png" v-if="!flag"></image>
              <image src="https://ossresource.miyingbl.com/def/cc2ee202405241442129212.png" v-if="flag" ></image> -->
            </view>
          </view>
        </u-sticky>
      <view class="card">
        <view class="card-header">
          <view class="header-avtar flex-row-start">
            <view class="avatar flex-center">
              <image
                :src="
                  userInfo?.detail?.avatar ||
                  'https://ossresource.miyingbl.com/uploads/20231230/h-bl-app/1703899956674'
                "
                class="bor-radius-50 bg-co-ee"
              />
            </view>
            <view class="card-name flex-row-between">
              <view class="h-flex-column">
                <view class="flex-row-start">
                  <view class="name mar-r-10">{{ userInfo?.detail?.nickname || userInfo?.detail?.name }}</view>
                  <view class="user_tags" v-if="type == 'official'">
                    <image
                      src="https://ossresource.miyingbl.com/uploads/20240308/072661a99870e1fcfba1d1df6d8ddd35.png"
                    ></image>
                  </view>
                  <view class="user_tags_4" v-if="type == 'doctor' && userInfo?.detail?.lname&& userInfo?.detail?.lname.length==4">
                    {{ userInfo?.detail?.lname }}
                  </view>
                  <view class="user_tags_5" v-if="type == 'doctor' && userInfo?.detail?.lname&& userInfo?.detail?.lname.length==5">
                    {{ userInfo?.detail?.lname }}
                  </view>
                  <view class="user_tags_3" v-if="type == 'doctor' && userInfo?.detail?.lname&& userInfo?.detail?.lname.length==3">
                    {{ userInfo?.detail?.lname }}
                  </view>
                  <view class="user_tags_2" v-if="type == 'doctor' && userInfo?.detail?.lname&& userInfo?.detail?.lname.length==2">
                    {{ userInfo?.detail?.lname }}
                  </view>
                </view>
                <view class="f-s-26" style="margin-top: 5rpx;display:flex;color: #5C5C5C;">
                  <view style="margin-right:20rpx" @click="goToLike(userInfo?.isSelf,0) ">{{ userInfo?.detail?.followCount || '0' }}关注</view>
                  <view class="" @click="goToLike(userInfo?.isSelf,1)">{{ userInfo?.detail?.fansCount || '0' }}粉丝</view>
                </view>
              </view>
              <view>
                <view class="btn-sure " @click="follow" :class="{ btnFollow: userInfo?.detail?.isFollow }" v-if="!flag && !userInfo?.isSelf" >
                  {{ userInfo?.detail?.isFollow ? '已关注' : '+关注' }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="card_hospital mar-b-20" v-if="type == 'doctor'">
          <view class="card_hospital_title">
            <text class="title">在职医院：</text>
            <text class="name">{{userInfo?.detail?.hospital_name || '--'}}</text>
          </view>
          <view class="card_hospital_title">
            <text class="title">科室：</text>
            <text class="name">{{userInfo?.detail?.rf_name || '--'}}</text>

          </view>
        </view>
        <view class="card-desc" >
          <view class="popupIpt" v-if="type == 'doctor'">
            {{isExpanded? userInfo?.detail?.adept : userInfo?.detail?.adept?.length>68 ? userInfo?.detail?.adept.substring(0, 68)+'...' : userInfo?.detail?.adept}}
            <text style="font-size: 26rpx;color:#00C1B9" @click="toggleContent" v-if="userInfo?.detail?.adept?.length > 68">{{isExpanded ? '收起' : '展开'}}</text> 
          </view>
          <view class="popupIpt" v-if="type == 'official'">
            {{isExpanded? userInfo?.detail?.autograph : userInfo?.detail?.autograph?.length>68 ? userInfo?.detail?.autograph.substring(0, 68)+'...' : userInfo?.detail?.autograph}}
          <text style="font-size: 26rpx;color:#00C1B9" @click="toggleContent" v-if="userInfo?.detail?.autograph?.length > 68">{{isExpanded ? '收起' : '展开'}}</text> 
          </view>
        </view>
        <view class="card-tag" v-if="type== 'doctor'">
          <view
            class="tag-item"
            v-for="(tag, j) in changeArr(userInfo?.detail?.newLabels)"
            :key="j"
          >
            {{ tag }}</view
          >
        </view>
        <view class="card-bottom">
          <view class="reservation h-flex">
            <view class="reservat_icon">
              <image src="@/static/my/reservat_h.png" style="width:40rpx;height:44rpx;display:block"></image>
            </view>
            <view class="reservat_text">
              <view class="reservat_top f-s-30">直播动态 · 已预约</view>
              <view class="reservat_bottom f-s-26" @click="navigateTo(`/socials/livePreview/trends?uid=${userInfo?.detail?.uid}`)">查看历史记录</view>
            </view>
          </view>        
        </view>
      </view>

      <!-- tab栏 -->
      <view
        class="week-tabsb"
        :style="{ position: 'sticky', top: tabTop + 'px', zIndex: 1000, backgroundColor: tabflag?navBgc:'' }"
      >
        <!-- <u-tabs
          class="tabs-container"
          itemStyle="padding-left: 80rpx; padding-right: 80rpx;height:60rpx;"
          lineWidth="40rpx"
          lineHeight="7rpx"
          lineColor="#00C1B9"
          :inactiveStyle="{ color: '#7C7C7C', fontSize: '28rpx',fontWeight: '500' }"
          :activeStyle="{ color: '#333333', fontWeight: '600',fontSize: '28rpx' }"
          :list="tabs"
          :current="current"
          @click="tabClick"
          :scrollable="false"
        ></u-tabs> -->
        <hTabs :list="tabs" @selectTab="tabClick"></hTabs>
      </view>

      <!-- 文章列表 -->
      <view class="article-list" :style="{height: (list.length == 0&&tabflag? '100vh' : 'auto')}" v-if="current == 0">       
        <view class="kepu">
          <view
            class="kepu_item"
            v-for="(item, index) in list"
            :key="index"
            @click="gotoDetail(item,false)"
          >
            <view class="title">
              <view class="cont u-line-1">
                {{ item?.title }}
              </view>
            </view>
            <view class="content u-line-2" v-if="item?.content">
              {{ extractTextFromRichText(item?.content)?.substring(0, 36) }}
              <span class="showAll" v-if="extractTextFromRichText(item?.content)?.length >= 36">...全文</span>
            </view>
            <view class="images">
              <!-- 只有一張圖 -->
              <view class="images1" v-if="item?.image&& item?.image[0]">
                <image :src="item?.image[0]" mode="widthFix"></image>
              </view>
            </view>
            <view class="userInfo">
              <view class="userInfoBox">
                <view
                >
                  <u--image :src="item?.avatar" width="40rpx" height="40rpx" radius="50%">
                    <template #error class="flex-center-center">
                      <view class="ic-error">
                        <u-icon name="photo" size="20"></u-icon>
                      </view>
                    </template>
                  </u--image>
                </view>
                <view>
                  <view class="nickname">
                    <view
                      class="nicknameName u-line-1"
                      >{{ item?.nickname }}</view
                    >
                    <view v-if="item?.app_user_tag">
                      <view class="tag_icons" v-if="item?.app_user_tag == 'official'">官方</view>
                      <view class="tag_icons2" v-if="item?.app_user_tag == 'doctor'">专家</view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="actions">
                <view
                  class="actions_items"
                  @click.stop="gotoDetail(item,true)"
                >
                  <u-icon
                    name="https://ossresource.miyingbl.com/uploads/20240411/c5302d3edc91942cbfd20ee1c4f31495.png"
                    size="18"
                  ></u-icon>
                  <text>评论</text>
                </view>
                <view class="actions_items" @click.stop="zanTab(item)">
                  <u-icon
                    name="heart-fill"
                    size="22"
                    v-if="item.is_like == 1"
                    color="#FFA800"
                  ></u-icon>
                  <u-icon name="heart" size="22" v-else color="#666666"></u-icon>
                  <text>{{ item?.zan_number }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <h-loading :show="loading" :showMore="list?.length"></h-loading>
        <view v-if="(total == 0) & (finish == true) & (list.length == 0)" class="empty_box" :style="{paddingTop: list.length == 0&&tabflag ? '336rpx' : '118rpx'}">
          <image class="empty_image" src="https://ossresource.miyingbl.com/def/a7eed202405231608191269.png"> </image>
          <view style="text-align: center; color: #ababab; font-size: 29rpx; margin-top: 20rpx"
            >暂无数据</view
          >
        </view>
      </view>
      <!-- 动态列表 -->
      <view class="article-list" :style="{height: (list.length == 0&&tabflag? '100vh' : 'auto')}" v-if="current == 1">
        <view class="dongtai">
          <view class="dongtai_item"
            v-for="(item, index) in list"
            :key="index"
            @click="gotoDetail(item,false)">
              <view class="item_header">
                <u--image :src="item?.avatar" width="67rpx" height="67rpx" radius="50%">
                  <template #error class="flex-center-center">
                    <view class="ic-error">
                      <u-icon
                        name="https://ossresource.miyingbl.com/uploads/20240311/h-bl-app/1710155137629"
                        size="60"
                      ></u-icon>
                    </view>
                  </template>
                </u--image>
                <view class="middle">
                  <view class="h-flex">
                    <view class="middle_name">{{ item?.nickname ? item?.nickname : '匿名用户' }}</view>
                    <view class="middle_tag">
                      <view v-if="type">
                        <view class="tag_icons" v-if="type == 'official'">官方账号</view>
                        <view class="tag_icons2" v-if="type == 'doctor'">专家医生</view>
                      </view>
                    </view>
                  </view>
                  <view class="middle_time">{{ item?.create_time }} 发表了</view>
                </view>
              </view>
              <view class="item_title">
                <text class="u-line-1">{{ item?.title }}</text>
              </view>
              <view class="item_content">
                <view class="dt_content" ref="content">
                  {{ extractTextFromRichText(item?.content)?.substring(0, 36) }}
                  <text v-if="extractTextFromRichText(item?.content)?.length >= 36" class="text_all">
                    ...全文
                  </text>
                </view>
              </view>
              <view class="images" v-if="item?.link_url && item?.link_url.length > 0">
                <view class="pic_item" v-for="(img,i) in item?.link_url" :key="i">
                  <image :src="img" mode="aspectFill" />
                </view>
              </view>
              <view class="footer">
                <view class="footer_item" @click.stop="share(item, index)">
                  <image class="icon_1" src="@/static/images/home_share_icon.png" />
                  <text>分享</text>
                </view>
                <view class="footer_item" @click.stop="collect(item, i)">
                  <image
                    class="icon_1"
                    src="https://ossresource.miyingbl.com/uploads/20240314/a5da0f6df2fb58b59c78165331d83d93.png"
                    v-if="item?.is_collect == 0"
                  />
                  <image
                    class="icon_1"
                    src="https://ossresource.miyingbl.com/uploads/20240314/bee8bc6279b5f19a3ead6d38b9f89f7b.png"
                    v-else
                  />
                  <text>收藏</text>
                </view>
                <view class="footer_item" @click.stop="toComment(item, index)">
                  <image class="icon_1" src="@/static/images/home_message_icon.png" />
                  <text>{{ item?.comment_number }}</text>
                </view>
                <view class="footer_item" @click.stop="zanTab(item, index)">
                  <image
                    class="icon_1"
                    src="https://ossresource.miyingbl.com/uploads/20240314/a204a2063782c1fcdb76e1785f43ca5d.png"
                    v-if="item?.is_like == 0"
                  />
                  <image
                    class="icon_1"
                    src="https://ossresource.miyingbl.com/uploads/20240314/bac8a54bb7578defd3fc6864c1893518.png"
                    v-else
                  />
                  <text>{{ item?.zan_number }}</text>
                </view>
              </view>
            </view>
        </view>
        <h-loading :show="loading" :showMore="list.length"></h-loading>
        <view v-if="(totalDt == 0) & (finish == true) & (list.length == 0)" class="empty_box" :style="{paddingTop: list.length == 0&&tabflag ? '336rpx' : '118rpx'}">
          <image class="empty_image" src="https://ossresource.miyingbl.com/def/a7eed202405231608191269.png"> </image>
          <view style="text-align: center; color: #ababab; font-size: 29rpx; margin-top: 20rpx"
            >暂无数据</view
          >
        </view>
      </view>
      <!-- 视频列表 -->
      <view v-if="current==2" class="list2 u-flex">
        <view class="listItem3" v-for="(item,index) in list4" :key="index" @click="navigateTo(`/pages-user/my-page/video/video?status=${item.status}`)">
          <image src="@/static/images/tb.png" mode="aspectFill" class="thumb"></image>
          <view class="foot u-flex" v-if="item.status==1">
            <u-icon name="play-right-fill" color="#fff"></u-icon>
            <view class="u-p-l-10">18.3W</view>
          </view>
        </view>
      </view>
      <!-- 患者评价 -->
      <view v-if="current == 3">
        <view v-if="commentList && commentList.length>0" style="padding:0 24rpx">
          <view class="comment-list">
            <view class="list_title ">
              <view class="title_left f-s-30">患者评价<text class="f-s-26" style="">（{{commenttotal}}条评价）</text></view>
              <view class="title_right">
                <view class="mar-r-10">好评率 {{favorable}}%</view>
                <view class="right_icon" @click="navigateTo(`/pages-users/my-page/common?uid=${userInfo?.detail?.uid}&doctor_id=${commentParams.doctor_id}`)">
                  <up-icon name="arrow-right"></up-icon>
                </view>
              </view>
          
            </view>
            <view class="comment-item" v-for="(item,index) in commentList" :key="index" v-show="index<3">
              <view class="item_top flex-row-between">
                {{item?.name}}
                <up-rate active-color="#FFB300" inactive-color="#b2b2b2" gutter="2" readonly :modelValue="item?.scoring"></up-rate>
              </view>
              <view class="item_middle mar-b-20">{{item?.content}}</view>
              <view class="item_bottom">
                {{ item?.create_time}}
              </view>
            </view>
          </view>
        </view>
        <view v-if="!commentList || commentList.length == 0" class="com_empty_box">
          <image src="https://ossresource.miyingbl.com/def/a7eed202405231608191269.png"></image>
          <view class="com_empty_text">暂无内容</view>
        </view>
      </view>
    </view>
    <h-login ref="login"></h-login>
    <!-- 动态分享 -->
    <h-share ref="shareRef" :showLh="showLh" :otherType="otherType"></h-share>
  </view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { onLoad, onReachBottom, onReady, onPageScroll,onShow } from '@dcloudio/uni-app'
import { useMemberStore, useSystemStore } from '@/stores'
import { otherdoctorInfo,otherofficialInfo } from '@/api/home'
import { followUserApi} from "@/api/social"
import {articleLstApi,articleOperateApi} from "@/api/social"
import { getreplyListApi } from '@/api/manpregnancy'
import { navigateTo,showToast } from '@/utils'
import hTabs from './components/h-tabs/h-tabs.vue'
const type = ref('')
const tops = ref(0)
const tabs = ref([{ name: '科普' }, { name: '帖子' },{name:'视频'}])
const current = ref(0)
const str = ref('')
const list = ref([])
const params = ref({
  limit:10,
  page: 1,
  type:2, //1=帖子2=科普
  status:1 //0=审核中1=已发布2=审核驳回 全部就啥也不传
})
const isExpanded = ref(false)
const url = ref('')
const uid = ref(null)
const loading = ref(false)
const showDtLoading = ref(false)
const dtList = ref([])
const login = ref(null)
const fenShow = ref(false)
const laheiShow = ref(false)
const equipment = ref('')
const is_self = ref(false)
const listQuery = ref({
  page: 1,
  limit: 10,
  uid: '',
  long: '',
  lat: '',
})
const list4 = ref([{
  name: '育儿经验',
  status: 1
},
{
  name: '育儿经验',
  status: 1
},
{
  name: '育儿经验',
  status: 1
}
])
const commentList = ref([]) // 评论列表
const last_page = ref(0)
const last_page_dt = ref(0)
const backgroundImage = ref('')
let finish = ref(false)
const total = ref(0)
const totalDt = ref(0)
const userInfo = ref({})
const flag = ref(false)
const tabflag = ref(false)
const shareRef = ref(null)
const showLh = ref(false)
const detail = ref({})
const otherType = ref(false)
const toBack = () => {
  uni.navigateBack({
    delta: 1,
  })
}
const toggleContent=() =>{
  isExpanded.value =!isExpanded.value
}
const toDetail = () => {
  const store = useMemberStore()
  if (!store.token) return login.value.open()
  if (store.token) {
  let item = {}
  
    if (userInfo.value.detail.uid == store.userInfo.uid) {
      showLh.value = false
      item = {
        imageUrl: userInfo.value.detail.avatar,
        title: `分享${userInfo.value.detail.nickname}的个人主页`,
        summary: userInfo.value.detail.autograph,
        path: `pages-users/my-page/official-doctor-home?uid=${store.userInfo.uid}`,
        uid: userInfo.value.detail.uid,
        id: userInfo.value.detail.uid,
      }
    } else {
      showLh.value = true
      item = {
        title: `分享${userInfo.value?.detail.nickname}的个人主页`,
        summary: `${userInfo.value?.detail.autograph}` || '这个人超有意思，快来关注吧',
        imageUrl: userInfo.value.detail.avatar,
        path: `pages-users/my-page/official-doctor-home?uid=${userInfo.value.detail.uid}`,
        uid: userInfo.value.detail.uid,
        id: userInfo.value.detail.uid,
        user_id: userInfo.value.detail.uid,
      }
    }
    otherType.value = true
    shareRef.value.open(item)}
  // fenShow.value = true
}
function tabClick(e) {
  switch (e) {
    case 0:
      current.value = e
      params.value.type = 2
      params.value.page = 1
      list.value = []
      finish.value = false
      getContent()
      break
    case 1:
      current.value = e
      params.value.type = 1
      params.value.page = 1
      list.value = []
      finish.value = false
      getContent()
      break

    case 2:
      current.value = e
      break
    case 3:
      current.value = e
      getreplyList()
      break
  }
}
const commentParams = ref({
  doctor_id:'',
  page: 1,
  limit: 10,
  type:0 //0全部 1孕产 2男性
})
const favorable = ref(0) //好评率
const commenttotal = ref(0)
async function getreplyList() {
  console.log('commentParams',commentParams.value);
  
  const res = await getreplyListApi(commentParams.value)
  commentList.value = res.data.data
  favorable.value = res.data.favorable
  commenttotal.value = res.data.total

}
onShow(() => {
})
onPageScroll((e) => {
  onPageScrollEvent(e)
})

const goToLike = (is_self,type) => {
  if(is_self) {
    switch (type) {
      case 0:
        navigateTo('/pages-users/my-like/index?current=0')
        break
      case 1:
        navigateTo('/pages-users/my-like/index?current=1')
        break
    }
  }else {
    return false
  }
}
const scrollHeight = ref(0) // 滚动高度
const navBgc = ref('transparent') // 导航栏背景色
const textColor = ref('#fff') // 导航栏字体颜色
const tabTop = ref(0) // tab栏距离顶部高度
const navHeight = ref(0) // 顶部导航栏高度
const navWeeHeight = ref(0) // tab高度
/**
 * 页面滚动
 */
function onPageScrollEvent(e) {
  scrollHeight.value = Math.floor(e.scrollTop) * 2
  const t = Math.floor(e.scrollTop) * 2
  navBgc.value = t > cardTop.value+100 ? '#fff' : 'transparent'
  textColor.value = t > cardTop.value+100 ? '#333333' : '#fff'
  e.scrollTop * 2 > canScroll.value ? (flag.value = true) : (flag.value = false)
  e.scrollTop+100 > navTop.value ? (tabflag.value = true) : (tabflag.value = false)
  tabTop.value = Math.floor(bottom.value)
}
const canScroll = ref(0)
const bottom = ref(0)
const navTop = ref(0)
const cardTop = ref(0)
// 获取高度
function getDocumentInfo() {
  const query = uni.createSelectorQuery()
  const query1 = uni.createSelectorQuery()
  const query2 = uni.createSelectorQuery()
  const query3 = uni.createSelectorQuery()
  query
    ?.select('.header')
    ?.boundingClientRect((navbar_data) => {
      navHeight.value = navbar_data?.height
      bottom.value = navbar_data?.bottom+20
    })
    .exec()
  query1
    ?.select('.card-bottom')
    ?.boundingClientRect((header_data) => {
      canScroll.value = header_data?.top
    })
    .exec()
  query2
    ?.select('.week-tabsb')
    ?.boundingClientRect((week_data) => {
      navWeeHeight.value = week_data?.height
      navTop.value = week_data?.top
    })
    .exec()
  query3
    ?.select('.card')
    ?.boundingClientRect((card) => {
      console.log('card',card);
      cardTop.value = card?.top
    })
    .exec()
}
function getSystemInfo() {
  uni.getSystemInfo({
    success: (e) => {
      tops.value = e.statusBarHeight
    },
  })
}
const gotoDetail = (item,isCom) => {
  if(current.value == 0) {
    if(isCom) {
      navigateTo(`/baby/science/index?isCom=${isCom}&id=${item.id}`)
    }else {
      navigateTo(`/baby/science/index?id=${item.id}`)
    }
  }else if(current.value == 1) {
    navigateTo('/socials/detail/index?id=' + item.id)
  }
}
/**
 * 显示登录
 */
function showLogin() {
  nextTick(() => {
    login.value.open()
    return false
  })
}
// 点赞
async function zanTab(row) {
  const userStore = useMemberStore()
  const token = userStore?.token
  if (!token) {
    login.value.open()
    return false
  }
  console.log('row',row);
  
  const res = await articleOperateApi( {
    article_id: row.id,
    type: 1, 
    tab: current.value == 0?2:1,  //1=帖子2=科普
  })

  if (row.is_like == 1) {
    row.zan_number--
    row.is_like = 0
  } else {
    row.zan_number++
    row.is_like = 1
  }
  uni.showToast({
    title: res.message,
    icon: 'none',
  })
}
// 关注
async function follow() {
  try {
    const res: any = await followUserApi({
      to_uid: uid.value,
    })
    uni.showToast({ title: res.message })
    uni.$emit('updateUserInfo')
    if(type.value == 'doctor'){
      getDoctorUserInfo()
    }else if(type.value == 'official'){
      getofficialInfo()}
  } catch (error) {
    console.log(error)
  }
}
function toReport() {
  uni.navigateTo({
    url: '/pageT/report?id=' + uid.value + '&type=8',
  })
}
const lahei = () => {
  fenShow.value = false
  laheiShow.value = true
}
const closeLafei = () => {
  laheiShow.value = false
}
function laheiSure() {
  uni.showToast({
    title: '拉黑成功',
    duration: 1000,
  })
  laheiShow.value = false
}
// 获取其他医生用户信息
async function getDoctorUserInfo() {
  const p = {
    doctor_uid: uid.value,
  }
  const res: any = await otherdoctorInfo(p)
  userInfo.value = res.data
  str.value = res.data?.detail?.adept 
  backgroundImage.value =
    res.data?.detail?.background || type.value =='doctor'?
    'https://ossresource.miyingbl.com/uploads/20240416/4b54e0bed8fda9ea8538906fe02f647a.png' :'https://ossresource.miyingbl.com/uploads/20240507/9e7d0c7162622a59dccfc1aabb2fe056.png'
  commentParams.value.doctor_id = res.data.detail.id
}
// 获取其他官方用户信息
async function getofficialInfo() {
  const p = {
    uid: uid.value,
  }
  const res: any = await otherofficialInfo(p)
  userInfo.value = res.data
  str.value =  res.data?.detail?.autograph
  backgroundImage.value =
    res.data?.detail?.background ||  'https://ossresource.miyingbl.com/uploads/20240507/9e7d0c7162622a59dccfc1aabb2fe056.png'
}
// 获取医生、官方文章/动态列表
async function getContent() {
  const userStore = useMemberStore()
  loading.value = true
  const res = await articleLstApi(params.value)
  list.value = list.value.concat(...res.data?.list?.data.map(item =>({...item,content_type:current.value == 0 ? 'kp' : 'dt'}))) 
  if (res.data?.list?.data?.length == 0) {

  } else {
    if (res.data && Array.isArray(res.data.list.data)) {
          
    }
  }
  console.log('list',list.value);
  total.value = res.data.list.total
  last_page.value = res.data.list.last_page
  loading.value = false
  finish.value = true
}
// 处理标签
function changeArr(arr) {
  let newArr = []
  if (arr?.length) {
    for (let i = 0; i < arr?.length; i++) {
      if (arr[i].length == 4) {
        newArr.push(arr[i])
        if (newArr.length == 1) {
          if (newArr[0].length == 4) {
            if (arr[i].length == 2) {
              newArr.push(arr[i])
            }
          }
        }
        if (newArr.length == 2) {
          return newArr
        }
      } else if (arr[i].length == 3) {
        newArr.push(arr[i])
        if (newArr.length >= 2) {
          return newArr
        }
      } else if (arr[i].length <= 2) {
        newArr.push(arr[i])
        if (newArr.length >= 3) {
          return newArr
        }
      } else {
        newArr.push(arr[i])
      }
    }
  }

  return newArr
}
function forMatStatus(status) {
  let text = ''
  switch (status) {
    case 0:
      text = ''
      break
    case 1:
      text = '记经期'
      break
    case 2:
      text = '备孕中'
      break
    case 3:
      text = '怀孕中'
      break
    case 4:
      text = '宝宝已出生'
      break
    case 5:
      text = '未婚'
      break
    case 6:
      text = '准爸'
      break

    case 7:
      text = '爸爸'
      break
    case 8:
      text = '生产育儿'
      break
    case 9:
      text = '慢病'
      break
    case 10:
      text = ''
      break
  }
  return text
}
/**
 * 更新列表
 */
let zan = 0

function updateList(row, i, key) {
  if (key == 'is_follow') {
    dtList.value.forEach((e) => {
      if (e.uid == row.uid) {
        e.is_follow = e.is_follow == 0 ? 1 : 0
      }
    })
  } else if (key !== 'is_like') {
    return (dtList.value[i][key] = dtList.value[i][key] == 0 ? 1 : 0)
  } else if (key == 'is_like' && zan != 0) {
    dtList.value[i].zan_number--
    dtList.value[i][key] = 0
    zan = 0
  } else {
    zan = 1
    dtList.value[i].zan_number++
    dtList.value[i][key] = 1
  }
}
function addListener() {
  uni.$on('update_num', (row) => {
    const index = list.value.findIndex((item) => item.id == row.id)
    if (index != -1) {
      list.value[index].is_like = row.is_like
      list.value[index].is_collect = row.is_collect
      list.value[index].zan_number = row.zan_number
      list.value[index].comment_number = row.comment_number
    }
  })
  uni.$on('followUser',(uid) => {
    if(type.value == 'doctor') {
      getofficialInfo()
    }else if(type.value == 'official'){
      getofficialInfo()
    }
  })
}
const share = (row: any) => {
  const store = useMemberStore()
  if (!store.token) {
    login.value.open()
    return
  } else {
    if (row.content_type == 'kp') {
      row.path = `baby/science/index?id=${row.id}`
      row.imageUrl =
        row?.thumbnail ||
        'https://ossresource.miyingbl.com/uploads/20240407/01ee3354aaba5358383f38331eec8fec.png'
    } else {
      row.summary = row?.content
      row.imageUrl =
        row?.thumbnail ||
        'https://ossresource.miyingbl.com/uploads/20240407/01ee3354aaba5358383f38331eec8fec.png'
      row.path = `social/detail/index?id=${row.id}`
    }
    showLh.value = true
    row.path =
      row.content_type == 'dt'
        ? `social/detail/index?id=${row.id}`
        : `baby/science/index?id=${row.id}`
    console.log('row--', row)
    otherType.value = false
    shareRef.value.open(row)
  }
}
function extractTextFromRichText(html) {
  const re1 = new RegExp('<.+?>', 'g') // 匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
  const arrEntities = {
    lt: '<',
    gt: '>',
    nbsp: ' ',
    amp: '&',
    quot: '"',
    ldquo: '“',
    mdash: '—',
    rdquo: '”',
  }

  return html
    .replace(re1, '')
    .replace(/&(lt|gt|nbsp|amp|quot|ldquo|mdash|rdquo);/gi, function (all, t) {
      return arrEntities[t]
    })
}
async function collect(row, i) {
  const userStore = useMemberStore()
  if (!userStore.token) {
    login.value.open()
    return false
  }
  if (row.content_type == 'dt') {
    // 动态
    const res = await articleOperateApi({
      article_id: row.id,
      type: 2, 
      tab: current.value == 0?2:1,  //1=帖子2=科普
    })
    if (row.is_collect) {
      row.collect_number--
    } else {
      row.collect_number++
    }
    row.is_collect = !row.is_collect
    showToast(res.message)
    // emit('updateList', row, i, 'is_collect')
  }
}
const toComment = (item, i) => {
  navigateTo(
    `${item.content_type == 'dt' ? '/socials/detail/index' : '/baby/science/index'}?&id=${
      item.id
    }&isCom=true&type=${item.type}`,
    0,
  )
}


onLoad((options: any) => {
  if (options.uid) {
    uid.value = options.uid
    params.value.doctor_uid = options.uid

  }
  if (options.tag) {
    type.value = options.tag
    if(options.tag == 'official'){
      tabs.value = [{ name: '科普' }, { name: '帖子' },{name:'视频'}]
      getofficialInfo()
    }else if(options.tag == 'doctor'){
      tabs.value = [{ name: '科普' }, { name: '帖子' },{name:'视频'},{name:'患者评价'}]
      getDoctorUserInfo()
    }
  }
 
  getContent()
  getSystemInfo()
  addListener()
})
onReady(() => {

  getDocumentInfo()
})
onReachBottom(() => {
  if(params.value.page < last_page.value){
    params.value.page++
    getContent()
  }
})
</script>

<style lang="scss" scoped>
.pages {
  background-size: 100% 512rpx;
  background-repeat: no-repeat;
  background-position: top center;
  background-color: #f6f6f6;
  width: 100%;
  min-height: 100vh;
  .bgColor {
    .header {
      width: 750rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 143rpx;
      padding: 0 26rpx;
      .left{
        // width: 14rpx;
        // height: 27rpx;
        .head_img {
          width: 14rpx;
          height: 27rpx;
        }
      }
      .middle-avatar {
        margin-left: 5rpx;
        image {
          width: 81rpx;
          height: 81rpx;
        }
      }
      .middle {
      margin-right: 120rpx;
       .user_tags {
          image {
            width: 113rpx;
            height: 27rpx;
            display: block;
            margin-right: 10rpx;
          }
        }
      }
      .right-follow {
        margin-right: 38rpx;
        .btn-sure {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 130rpx;
          height: 55rpx;
          background: #00C1B9;
          border-radius: 38rpx;
          opacity: 1;
          font-size: 24rpx;
          font-weight: 500;
          color: #ffffff;
        }
        .btnFollow {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 130rpx;
          height: 55rpx;
          background: #fff;
          border: 1rpx solid #00C1B9;
          border-radius: 38rpx;
          opacity: 1;
          font-size: 24rpx;
          font-weight: 500;
          color: #00C1B9;
        }
      }
      .right {
        // display: flex;
        // align-items: center;
        // flex-direction: column;
        image{
          width: 30rpx;
          height: 30rpx;
        }
        .text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #ffffff;
        }
      }
    }
    .card {
      width: 702rpx;
      // min-height: 316rpx;
      background: #fefefe;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin: 0 auto;
      padding: 8rpx 22rpx 24rpx 26rpx;
      position: relative;
      z-index: 20;
      .card-header {
        height: 106rpx;
        width: 100%;
        margin-bottom: 10rpx;
        position: relative;
        .header-avtar {
          height:100%;
          .avatar{
            width: 140rpx;
            height: 140rpx;
            background: #F5F6F8;
            margin-top: -34rpx;
            border-radius: 50%;
            margin-right: 24rpx;
            image {
              width: 130rpx;
              height: 130rpx;
            }
          }
          .card-name {
            width: 512rpx;
            height: 100%;
            // float: right;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 30rpx;
            color: #202020;
            // padding-left: 24rpx;
            // margin-right: 290rpx;
            .user_tags {
              // display: flex;
              // align-items: center;
              // position: absolute;
              // bottom: 18rpx;
              text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 22rpx;
                color: #969696;
                margin-right: 10rpx;
              }

              image {
                width: 113rpx;
                height: 27rpx;
                display: block;
                margin-right: 10rpx;
              }
            }
          }
        }
      }
      .card_hospital{
        width: 662rpx;
        height: 140rpx;
        background: #F6F6F6;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 20rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #202020;
        .card_hospital_title{
          .title{
            color: #5C5C5C;
          }
        }
      }
      .card-desc {
        margin-bottom: 10rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        // min-height: 40rpx;
        .popupIpt {
          border: none;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #202020;         
        }
      }
      .card-tag {
        margin-bottom: 24rpx;
        display: flex;
        flex-wrap: wrap;
        .tag-item {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 20rpx;
          color: #00C1B9;
          margin-right: 20rpx;
          background: #D6FCFB;
          min-width: 101rpx;
          height: 31rpx;
          line-height: 31rpx;
          text-align: center;
          border-radius: 20rpx;
          padding: 0rpx 10rpx;
          margin-bottom: 5rpx;
        }
      }
      .card-bottom {
        display: flex;
        justify-content: space-between;
        .num {
          display: flex;
        }
        .btn-sure {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 130rpx;
          height: 55rpx;
          background: #00C1B9;
          border-radius: 38rpx;
          opacity: 1;
          font-size: 24rpx;
          font-weight: 500;
          color: #ffffff;
        }
        .btnFollow {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 130rpx;
          height: 55rpx;
          background: #fff;
          border: 1rpx solid #00C1B9;
          border-radius: 38rpx;
          opacity: 1;
          font-size: 24rpx;
          font-weight: 500;
          color: #00C1B9;
        }
      }
    }
    .week-tabsb {
      padding: 17rpx 22rpx 20rpx 22rpx;
      .tabs-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        flex-direction: inherit;
      }
    }
    .article-list {
      width: 702rpx;
      margin: 0 auto;
      .kepu {
        .kepu_item {
          background: #ffffff;
          border-radius: 12rpx;
          padding: 20rpx 30rpx;
          box-sizing: border-box;
          font-family: PingFang SC, PingFang SC;
          margin-bottom: 20rpx;

          .title {
            font-weight: 500;
            font-size: 34rpx;
            color: #333333;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .cont {
              width: 570rpx;
            }

            .close_btn_icon {
              width: 26rpx;
              height: 32rpx;
              display: block;
            }
          }

          .content {
            font-weight: 500;
            font-size: 28rpx;
            color: #666666;
            margin-top: 10rpx;
            position: relative;
            .showAll {
              color: #305e9d;
            }
          }

          .images {
            margin-top: 15rpx;

            .images1 {
              width: 356rpx;
              max-height: 400rpx;
              overflow: hidden;
              border-radius: 10rpx;

              image {
                width: 356rpx;
                border-radius: 10rpx;
              }
            }
          }

          .userInfo {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20rpx;

            .userInfoBox {
              display: flex;
              align-items: center;

              .nickname {
                padding-left: 10rpx;
                font-weight: 500;
                font-size: 24rpx;
                color: #666;
                display: flex;
                align-items: center;

                .nicknameName {
                  max-width: 200rpx;
                  overflow: hidden;
                }
                .tag_icons {
                  width: 75rpx;
                  height: 27rpx;
                  background: url('@/static/images/home_icon_1.png') center center;
                  background-size: 100% 100%;
                  line-height: 27rpx;
                  font-weight: 500;
                  font-size: 18rpx;
                  color: #ffffff;
                  margin-right: 8rpx;
                  padding-left: 28rpx;
                }

                .tag_icons2 {
                  width: 75rpx;
                  height: 27rpx;
                  background: url('@/static/images/home_icon_2.png') center center;
                  background-size: 100% 100%;
                  line-height: 27rpx;
                  font-weight: 500;
                  font-size: 18rpx;
                  padding-left: 28rpx;
                  color: #ffffff;
                  margin-right: 8rpx;
                }
            }

              .time {
                font-weight: 500;
                font-size: 20rpx;
                color: #9d9d9d;
                padding-left: 10rpx;
              }
            }

            .actions {
              display: flex;

              .actions_items {
                font-weight: 500;
                font-size: 24rpx;
                color: #666666;
                display: flex;
                margin-left: 24rpx;
                align-items: center;

                text {
                  padding-left: 10rpx;
                }
              }
            }
          }
        }
      }
      .dongtai {
        .dongtai_item {
          background: #ffffff;
          border-radius: 12rpx;
          padding: 20rpx 30rpx;
          box-sizing: border-box;
          font-family: PingFang SC, PingFang SC;
          margin-bottom: 20rpx;
          .item_header {
            display: flex;
            align-items: center;
            & > image {
              width: 67rpx;
              height: 67rpx;
              background-color: #eee;
              border-radius: 50%;
              margin-right: 9rpx;
              display: block;
            }

            & > .middle {
              flex: 1;
              padding-left: 10rpx;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .middle_time {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 18rpx;
                color: #000000;
              }
              .middle_name {
                font-weight: 500;
                font-size: 28rpx;
                color: #000000;
                margin-bottom: 5rpx;
              }

              .middle_tag {
                // font-weight: 500;
                // font-size: 22rpx;
                // color: #969696;
                display: flex;
                align-items: center;



                .tag_icons {
                  width: 126rpx;
                  height: 27rpx;
                  background: url('@/static/images/home_icon_1.png') center center;
                  background-size: 100% 100%;
                  line-height: 27rpx;
                  font-weight: 500;
                  font-size: 18rpx;
                  color: #ffffff;
                  margin-right: 8rpx;
                  padding-left: 30rpx;
                }

                .tag_icons2 {
                  width: 126rpx;
                  height: 27rpx;
                  background: url('@/static/images/home_icon_2.png') center center;
                  background-size: 100% 100%;
                  line-height: 27rpx;
                  font-weight: 500;
                  font-size: 18rpx;
                  padding-left: 30rpx;
                  color: #ffffff;
                  margin-right: 8rpx;
                }
              }
            }
          }
          .item_title {
            margin-top: 13rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #333333;
          }
          .item_content {
            .dt_content {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 28rpx;
              color: #666666;
              position: relative;
            }
            .text_all {
              position: absolute;
              bottom: 0;
              left: auto;
              padding-left: 3rpx;
              font-size: 28rpx;
              color: #305E9D;
            }
          }
          .images {
            width: 100%;
            align-items: center;
            margin-top: 20rpx;
            overflow: hidden;

            .pic_item {
              width: 33.333%;
              float: left;
              height: 216rpx;
              box-sizing: border-box;
              padding: 1%;

              &:nth-child(3n + 1) {
                margin-left: 0;
              }

              image {
                width: 100%;
                height: 100%;
                border-radius: 10rpx;
              }
            }
          }
          & > .footer {
            width: 100%;
            height: 36%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 26rpx;

            .footer_item {
              display: flex;
              align-items: center;

              .icon_1 {
                width: 26rpx;
                height: 26rpx;
              }

              .icon_3 {
                width: 25rpx;
                height: 24rpx;
              }

              text {
                margin-left: 15rpx;
                font-weight: 500;
                font-size: 26rpx;
                color: #333333;
              }
            }
          }
        }
      }
    }
    .empty_box {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 118rpx;
      // padding-bottom: 100rpx;
      // padding-bottom: calc(100vh - 118rpx - 512rpx - 285rpx - 250rpx);
      // background: #fff;
      .empty_image {
        width: 240rpx;
        height: 200rpx;
      }
    }
  }
}
.pages::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient( 180deg, rgba(51,51,51,0.3) 100%, rgba(51,51,51,0) 0%);
  width:100%;
  height: 512rpx;
  z-index: 1;
  pointer-events: none;
}
.btn-sure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130rpx;
  height: 55rpx;
  background: #00C1B9;
  border-radius: 38rpx;
  opacity: 1;
  font-size: 24rpx;
  font-weight: 500;
  color: #ffffff;
}
.reservation{
  margin-right: 200rpx;
  .reservat_icon{
    margin-right: 21rpx;
    
  }
  .reservat_text{
    .reservat_top{
      margin-bottom: 12rpx;
      color: #202020;
    }
    .reservat_bottom{
      color: #5C5C5C;
    }
  }

}
.fen_box_title {
  text-align: center;
  font-size: 32rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 90rpx;
  height: 90rpx;
}

.fen_box {
  width: 100%;
  border-radius: 10rpx 10rpx 0 0;
  padding: 0 24rpx 24rpx;

  .fen_box_cen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 20rpx;

    .fen_box_cen_l {
      text-align: center;
      width: 150rpx;
      margin: 0;
      line-height: 1;
      background-color: transparent !important;

      &::after {
        background: transparent !important;
      }

      .fen_box_cen_l_img {
        width: 100rpx !important;
        height: 100rpx !important;
        border-radius: 50%;
      }

      .fen_box_cen_l_te {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 80rpx;
      }
    }

    .lh_box_cen_l {
      width: 216rpx;
      padding: 10rpx 0 15rpx;
      background: #ffffff;
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      text-align: center;
      margin: 10rpx 20rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #333333;

      image {
        width: 75rpx;
        height: 75rpx;
        display: block;
        margin: 0 auto;
      }
    }
  }
}
.fen_box_1 {
  width: 571rpx;
  height: 277rpx;
  background: #ffffff;
  border-radius: 26rpx 26rpx 26rpx 26rpx;
  .fen_box_title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 30rpx;
    color: #000000;
  }
  .fen_box-content {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #333333;
    padding: 18rpx 16rpx 36rpx 36rpx;
    text-align: center;
  }
  .fen_box_btn {
    display: flex;
    justify-content: space-around;
    .btn_cancle {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #8b8b8b;
    }
    .btn_sure {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #de0000;
    }
  }
}
.u-textarea {
  padding: 0;
}
.u-textarea--disabled {
  background: #fff;
}
.user_tags_4{
  width: 112rpx;
  height: 27rpx;
  background: url('https://ossresource.miyingbl.com/def/63413202405250951285974.png') center center;
  background-size: 100% 100%;
  line-height: 27rpx;
  font-weight: 500;
  font-size: 18rpx;
  color: #ffffff;
  padding-top: 2rpx;
  padding-left: 25rpx;
}
.user_tags_5{
  width: 130rpx;
  height: 27rpx;
  background: url('/static/index/ysd.png') center center;
  background-size: 100% 100%;
  line-height: 27rpx;
  font-weight: 500;
  font-size: 18rpx;
  color: #ffffff;
  padding-top: 2rpx;
  padding-left: 27rpx;
}
.user_tags_3 {
  width: 94rpx;
  height: 27rpx;
  background: url('/static/index/ysb.png') center center;
  background-size: 100% 100%;
  line-height: 27rpx;
  font-weight: 500;
  font-size: 18rpx;
  color: #ffffff;
  padding-top: 2rpx;
  padding-left: 25rpx;

}
.user_tags_2 {
  width: 82rpx;
  height: 27rpx;
  background: url('/static/index/ysa.png') center center;
  background-size: 100% 100%;
  line-height: 27rpx;
  font-weight: 500;
  font-size: 18rpx;
  color: #ffffff;
  padding-top: 2rpx;
  padding-left: 27rpx;

}
.list2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.listItem3 {
  width: 248rpx;
  height: 332rpx;
  background: #D8D8D8;
  position: relative;

  .thumb {
    display: block;
    width: 248rpx;
    height: 332rpx;
    display: block;
  }

  .more {
    position: absolute;
    top: 10rpx;
    right: 15rpx;
  }

  .foot {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(32, 32, 32, 0) 0%, #202020 100%);
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #FFFFFF;
    padding-left: 15rpx;
    padding-bottom:10rpx;
  }
}
.comment-list{
  width: 702rpx;
  height: 805rpx;
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 20rpx;
}
.com_empty_box{
  padding-top: 350rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  image{
    width: 240rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }
  .com_empty_text{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #ABABAB;
  }
}
.list_title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title_right{
    display: flex;
    align-items: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #666666;
  }
}
.comment-item{
  padding-bottom: 20rpx;
  padding-top: 20rpx;
  border-bottom: 1rpx solid #F6F6F6;
  .item_top{
    margin-bottom: 10rpx;
  }
  .item_middle{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    
  }
  .item_bottom{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #999999;
  }
}
</style>
